<template>
	<view>
		<view class="top flex flex-direction align-center justify-center">
			<image v-if="isShowAvatar" @click="showPop" :src="user.avatar"></image>
			<image v-else @click="showPop" src="/static/d2.png"></image>
			<text>{{user.nick_name}}</text>
		</view>
		<view class="item flex align-center justify-between">
			<text>昵称</text>
			<view @click="toUpdataName" class="flex align-center">
				<text>{{user.nick_name}}</text>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
		</view>
		<picker @change="PickerChange" :value="index" :range="picker">
			<view class="item flex align-center justify-between">
				<text>性别</text>
				<view class="flex align-center">
					<text>{{picker[index]}}</text>
					<text class="lg text-gray cuIcon-right"></text>
				</view>
			</view>
		</picker>
		<!-- <picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
			<view class="item margin-top flex align-center justify-between">
				<text>生日</text>
				<view class="flex align-center">
					<text>{{date}}</text>
					<text class="lg text-gray cuIcon-right"></text>
				</view>
			</view>
		</picker> -->
		<view @click="tochangePone" class="item flex align-center justify-between">
			<text>电话</text>
			<view class="flex align-center">
				<text>{{user.mobile}}</text>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
		</view>
		<view @click="toChangePassword" class="item flex align-center justify-between">
			<text>修改密码</text>
			<view class="flex align-center">
				<text></text>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
		</view>
		<view @click="toUpadtaAddress" class="item margin-top flex align-center justify-between">
			<text>收货地址</text>
			<view class="flex align-center">
				<text></text>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
		</view>
		<view v-if="isShowPop" class="pop flex flex-direction align-center">
			<view class="pop-con pop-con1 flex flex-direction">
				<view class="pop-con-item" @tap='selectLocalPicUrl'>
					相册
				</view>
				<view class="pop-con-item" @tap='selectLocalTakePicUrl'>
					拍照
				</view>
			</view>
			<view @click="close" class="pop-con pop-con2 flex flex-direction">
				<view class="pop-con-item" style="color: #666666;">
					取消
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				user: '',
				isShowPop: false,
				isShowAvatar: false,
				date: '2018-12-25',
				index: 0,
				picker: ['女', '男'],
			}
		},
		onShow() {
			this.loadUser()
		},
		onLoad() {
			this.loadUser()
		},
		methods: {
			loadUser: function() {
				try {
					var userId = uni.getStorageSync('user').user_id;
					api.get({
						url: 'User/GetUserInfo',
						data: {
							user_id: userId
						},
						success: data => {
							console.log('loadUser:' + JSON.stringify(data))
							if (data.ErrCode == 0) {
								uni.setStorageSync('user', data.Response)
								this.user = data.Response
								if (this.user.avatar && this.user.avatar.indexOf('http') >= 0 && (this.user.avatar.indexOf('.jpg') >= 0 ||
										this.user.avatar.indexOf('.png') >= 0)) {
									this.isShowAvatar = true
								}
								if (this.user.sex == '男') {
									this.index = 1
								}
							}
						}
					});
				} catch (e) {
					uni.showModal({
						title: '提示',
						content: '账号超时，请重新登陆',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				}
			},
			updateUser() {
				api.post({
					url: 'User/PostUserNikenameEdit?user_id=' + this.user.user_id,
					data: {
						nick_name: this.user.nick_name,
						sex: this.picker[this.index],
					},
					success: data => {
						if (data.ErrCode == 0) {
							uni.showToast({
								title: '修改成功'
							})
							// uni.showModal({
							// 	title:'提示',
							// 	content:'修改成功'
							// })
							// uni.navigateTo({
							// 	url:'/pages/myInfor/myInfor'
							// })
						}
					}
				});
			},
			upDatePic(item) {
				api.post({
					url: 'User/PostUserPhotoEdit?user_id=' + this.user.user_id,
					data: {
						img_url: item
					},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {}
					}
				});
			},
			upLoadPic(item) {
				api.post({
					url: 'User/UploadImage',
					data: {
						image: item
					},
					success: data => {
						uni.hideLoading()
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.user.avatar = api.HOST + '' + data.Response.imgurl
							uni.setStorageSync('user', this.user)
							this.upDatePic(data.Response.imgurl)
							this.close()
						}
					}
				});
			},
			selectLocalPicUrl() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						console.log(JSON.stringify(tempFilePaths))
						this.urlToBase64(tempFilePaths)
					},
				})
			},
			selectLocalTakePicUrl() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从拍照选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						console.log(JSON.stringify(tempFilePaths))
						this.urlToBase64(tempFilePaths)
					},
				})
			},
			// 获取图片信息
			urlToBase64(url) {
				// #ifdef MP-WEIXIN
				wx.getFileSystemManager().readFile({
					filePath: url, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => {
						//成功的回调
						uni.showLoading({
							title: '上传中...'
						});
						this.upLoadPic(res.data)
					},
					complete: e => {
						console.log('urlToBase64:' + JSON.stringify(e))
					}
				});
				// #endif
				// uni.request({
				// 	url: url,
				// 	method: 'GET',
				// 	responseType: 'arraybuffer',
				// 	success: res => {
				// 		let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
				// 		this.upLoadPic(base64)
				// 		// base64 = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
				// 		// console.log(base64);

				// 	}
				// });
			},
			toUpadtaAddress() {
				uni.navigateTo({
					url: "/pages/receivingAddress/receivingAddress"
				})
			},
			tochangePone() {
				uni.navigateTo({
					url: "/pages/changePhone/changePhone"
				})
			},
			toUpdataName() {
				uni.navigateTo({
					url: "/pages/editorNickname/editorNickname"
				})
			},
			toChangePassword() {
				uni.navigateTo({
					url: "/pages/changePassword/changePassword"
				})
			},
			showPop() {
				this.isShowPop = true
			},
			close() {
				this.isShowPop = false
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			PickerChange(e) {
				this.index = e.detail.value
				console.log(this.index)
				this.updateUser()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pop-con1 {
		position: absolute;
		bottom: 130upx;
	}

	.pop-con2 {
		position: absolute;
		bottom: 10upx;
	}

	.pop-con-item:nth-child(1) {
		border-bottom: solid 1px #dddddd;
		color: $btn-bground;
	}

	.pop-con-item {
		width: 100%;
		height: 94upx;
		text-align: center;
		line-height: 94upx;
		font-size: 30upx;
	}

	.pop-con {
		width: 702upx;
		background-color: #ffffff;
		border-radius: 15upx;
	}

	.pop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.item {
		padding-left: 34upx;
		padding-right: 20upx;
		border-bottom: 1upx solid #ddd;
		background-color: #fff;
		height: 90upx;
	}

	.item>view>text:nth-child(1) {
		font-size: 30upx;
		color: #000000;
	}

	.item>view>text:nth-child(2) {
		color: #a5a5a5;
		font-size: 34upx;
		margin-left: 20upx;
	}

	.item>text {
		font-size: 30upx;
		color: #666666;
	}

	.top {
		width: 100%;
		background-color: #fff;
		border-bottom: 1upx solid #ddd;
		height: 250upx;
	}

	.top image {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
	}

	.top>text {
		font-size: 30upx;
		color: #666666;
		margin-top: 12upx;
	}
</style>
